﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductGroups.aspx.cs" Inherits="famails.BackEnd.Customer.ProductGroups" MasterPageFile="~/Master.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%; padding: 10px;">
        <!--start content 01-->
        <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="border: 1px solid #333; margin-bottom: 10px; padding: 0px;">
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Thông tin nhóm sản phẩm
            </div>
            <%-- <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>--%>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="height: auto; padding: 10px;">
                <asp:Panel Visible="false" ID="pnError" runat="server">
                    <div class="error-box round">
                        <asp:Label ID="lblError" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
                <asp:Panel Visible="false" ID="pnSuccess" runat="server">
                    <div class="confirmation-box round">
                        <asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
                    </div>
                </asp:Panel>
            </div>
            <asp:HiddenField ID="hdfId" runat="server" />
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;">
                <fieldset>

                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Tên nhóm sản phẩm</label>
                    <asp:TextBox ID="txtname" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                        runat="server"></asp:TextBox>

                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;">
                <fieldset>

                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Cấp</label>
                    <asp:DropDownList ID="ddlGroupStep" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                        runat="server" OnSelectedIndexChanged="ddlGroupStep_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="Cấp 1" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Cấp 2" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Cấp 3" Value="3"></asp:ListItem>
                    </asp:DropDownList>

                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto; padding: 10px;">
                <fieldset>

                    <label for="simple-input" style="font-weight: bolder; text-transform: none">
                        Cấp cha</label>
                    <asp:DropDownList ID="ddlParentGroup" CssClass="form-control" Style="border: 1px solid #333; border-radius: 0px;"
                        runat="server">
                    </asp:DropDownList>

                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6" style="height: auto;padding:0px;">
                <fieldset>
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:32px 10px 10px;">
                        <button runat="server" class="btn col-xs-4 col-lg-2 col-md-3 col-sm-3" style="float: left;background: #333; color: #fff; text-align: center; padding: 8px 10px; border-radius: 0px;border:1px solid #fff;"
                            onserverclick="btnSave_Click">
                            <i style="margin-right: 10px;" class="fa fa-save"></i>Lưu
                        </button>
                        <div class="btn col-xs-8 col-lg-3 col-md-4 col-sm-4" style="float: left; background: #333; color: #fff; border:1px solid #333;text-align: center; padding: 8px 10px;border-radius: 0px;border:1px solid #fff;" id="showWindowButton" >
                            <span class="fa fa-sitemap"></span> Cây sản phẩm
                        </div>
                        <div class="btn col-xs-12 col-lg-4 col-md-5 col-sm-5" style="float: left; background: #333; color: #fff; border:1px solid #333; text-align: center;padding: 8px 10px; border-radius: 0px;border:1px solid #fff;" id="hideWindowButton" >
                            <span class="fa fa-sign-in"></span> Đóng cây sản phẩm
                        </div>
                    </div>
                </fieldset>
            </div>
            <%-- </ContentTemplate>
            </asp:UpdatePanel>--%>
            <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding: 10px 20px; background: #000; color: #fff; font-size: 18px; font-weight: bold; position: relative;">
                Danh sách nhóm sản phẩm
            </div>
            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 " style="padding: 0px;">
            </div>
            <div id="window">
                <div id="windowHeader">
                    <span>Cây sản phẩm
                    </span>
                </div>
                <div style="overflow: hidden;" id="windowContent">
                    <div id="treeGrid">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 " style="padding: 10px;">
                    <div class=" table-responsive">
                <table class="table table-striped table-bordered table-hover" id="dataTables">
                    <thead>
                        <tr>
                            <th>Tên nhóm sản phẩm</th>
                            <th>Cấp</th>
                            <th>Ngày tạo</th>
                            <th style="width:100px;">Điều chỉnh</th>
                        </tr>
                    </thead>
                    <tbody>
                <asp:Repeater ID="dlProductGroup" runat="server">
                        <ItemTemplate>
                        <tr>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductGroupName") %>'></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblAttr" runat="server" Text='<%# "Cấp "+Eval("GroupStep") %>'></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblGmail" runat="server" Text='<%# Eval("CreateDate") %>'></asp:Label>
                            </td>
                            <td style="text-align:center;">
                                <asp:ImageButton ID="btnEdit" runat="server" ImageUrl="../resource/images/edit-validated-icon.png"
                                    CommandArgument='<%# Eval("ProductGroupID") %>' OnClick="btnEdit_Click" />
                                <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="../resource/images/Delete-icon.png"
                                    CommandArgument='<%# Eval("ProductGroupID") %>'
                                    OnClientClick="return confirmDelete('Bạn có chắc rằng sẽ xóa thuộc tính này không ?')"
                                    OnClick="btnDelete_Click" />
                            </td>
                        </tr>     
                        </ItemTemplate>
                    </asp:Repeater>
                    </tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery(function ($) {
            var url = "ProductGroups.aspx/LoadTree";
            $("#treeGrid").jqxGrid('showloadelement');
            //var postValue = "{name:'" + $('#ContentPlaceHolder1_txtName').val() + "',code:'" + $('#ContentPlaceHolder1_txtCode').val() + "',group1:" + $('#ContentPlaceHolder1_ddlGroup1').val() + ",group2:" + $('#ContentPlaceHolder1_ddlGroup2').val() + ", from:'" + $('#txtFromDate').val() + "', to:'" + $('#txtToDate').val() + "'}";
            // alert(postValue);
            function loadtree() {
                $.ajax({
                    type: "POST",
                    url: url,
                    //data: postValue,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var source =
                             {
                                 dataType: "json",
                                 dataFields: [
                                      { name: "ProductGroupID", type: "int" },
                                      { name: "ProductGroupName", type: "string" },
                                      { name: "children", type: "array" },
                                      { name: "CreateDate", type: "date" }
                                 ],
                                 hierarchy:
                                     {
                                         root: "children"
                                     },
                                 localData: data,
                                 id: "ProductGroupID"
                             };
                        var dataAdapter = new $.jqx.dataAdapter(source, {
                            loadComplete: function () {
                            }
                        });
                        // create jqxTreeGrid.
                        $("#treeGrid").jqxTreeGrid(
                        {
                            width: '100%',
                            source: dataAdapter,
                            altrows: true,
                            selectionMode: 'singleRow',
                            //enableHover: false,
                            editable: false,
                            columns: [
                             {
                                 text: 'Tên nhóm', dataField: 'ProductGroupName'
                             },
                             {
                                 text: 'Ngày tạo', dataField: 'CreateDate', width: 100, cellsalign: 'center', cellsFormat: 'dd/MM/yyyy'
                             }
                            ]
                        });
                    }
                });
            }
            loadtree();
            var basicDemo = (function () {
                //Adding event listeners
                function _addEventListeners() {
                    
                    $('#showWindowButton').click(function () {
                        loadtree();
                        $('#window').jqxWindow('open');
                    });
                    $('#hideWindowButton').click(function () {
                        $('#window').jqxWindow('close');
                    });
                };
                //Creating all page elements which are jqxWidgets
                function _createElements() {

                    //$('#resizeCheckBox').jqxCheckBox({ width: '185px', checked: true });
                    //$('#dragCheckBox').jqxCheckBox({ width: '185px', checked: true });
                };
                //Creating the demo window
                function _createWindow() {
                    $('#window').jqxWindow({
                        showCollapseButton: true, maxHeight: 400, maxWidth: 700, minHeight: 200, minWidth: 200, height: 300, width: 500,
                        initContent: function () {
                            //$('#tab').jqxTabs({ height: '100%', width: '100%' });
                            $('#window').jqxWindow('focus');
                        }
                    });
                };
                return {
                    config: {
                        dragArea: null
                    },
                    init: function () {
                        //Creating all jqxWindgets except the window
                        _createElements();
                        //Attaching event listeners
                        _addEventListeners();
                        //Adding jqxWindow
                        _createWindow();
                    }
                };
            }());
            //Initializing the demo
            basicDemo.init();
            $('#hideWindowButton').trigger('click');
        });
    </script>
    <script>
        jQuery(function ($) {
            $('#dataTables').dataTable();
        });
    </script>
</asp:Content>
